// 工单统计
import type { orderStatisticsStateType } from './typings'
import { defineComponent, reactive, ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import {
  ElRow,
  ElCard,
  ElCol,
  ElRadioGroup,
  ElRadioButton,
  ElDatePicker,
  ElButton,
  ElMessage,
  ElIcon,
  ElScrollbar
} from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
import BarChart from '~/pages/oam/components/orderStatistics/BarChart' // 报修来源同比环比
import PieChart from '~/pages/oam/components/orderStatistics/PieChart' // 报修来源
import PieChartDpt from '~/pages/oam/components/orderStatistics/PieChartDpt' // 报修来源
import SaasTitle from '~/components/SaasTitle'
import AliIcon from '~/components/AliIocn'
import styles from '~/pages/oam/index.module.scss'
import day from 'dayjs'

export default defineComponent(function OrderStatistics() {
  const store = useStore()
  /* 初始值 */
  const state = reactive<orderStatisticsStateType>({
    // 搜索
    whichMonth: '', // 哪个月
    lastMonth: '', // 上月
    thisMonth: '', // 本月
    // month: '', // 选择的月
    detail: {
      // 工单数量
      createOrder: '', // 新增工单
      completeOrder: '', // 已完成工单
      timeOutOrder: '', // 超时工单
      arrangeOrder: '' // 工单约时
    },
    cycle: '', // 传的值
    repairSource: [], // 报修来源统计
    repairSourceYM: [], // 报修来源同比环比分析
    workAreaDept: [], // 工区部门统计
    workAreaExecuted: [] // 工区处理统计
  })

  const month = ref('') // 选中的月份
  onMounted(() => {
    getMon()
  })

  /* methods */
  const whichMonthChanged = () => {
    // 上下月
    if (state.whichMonth) {
      state.cycle = state.whichMonth
      month.value = state.whichMonth
      handleGetOrderStatisticsData()
    }
  }
  // 获取本月与上月
  const getMon = () => {
    state.thisMonth = day().format('YYYY-MM-DD') // 本月
    state.lastMonth = day()
      .month(day().month() - 1)
      .format('YYYY-MM-DD') // 上月今日
    state.whichMonth = state.thisMonth // 默认本月
    month.value = state.thisMonth
    state.cycle = state.thisMonth
    handleGetOrderStatisticsData() // 主内容
  }

  // 主内容
  const handleGetOrderStatisticsData = async () => {
    const res = await store.dispatch('orderStatistics/GetWorkStatistics', state.cycle)
    state.detail = {
      createOrder: res.data.orderReport.createOrder,
      completeOrder: res.data.orderReport.completeOrder,
      timeOutOrder: res.data.orderReport.timeOutOrder,
      arrangeOrder: res.data.orderReport.arrangeOrder
    }
    state.repairSource = res.data.repairSource
    state.workAreaDept = res.data.workAreaDept
    state.repairSourceYM = res.data.repairSourceYM.data
    state.workAreaExecuted = res.data.workAreaExecuted
  }

  // 搜索
  const search = () => {
    state.cycle = month.value
    if (state.cycle > state.thisMonth) {
      // 避免选未来数据时还显示上一条的内容
      state.repairSource = []
      state.repairSourceYM = []
      state.workAreaDept = []
      state.workAreaExecuted = []
      state.detail = {
        createOrder: '',
        completeOrder: '',
        timeOutOrder: '',
        arrangeOrder: ''
      }
      state.whichMonth = ''
      ElMessage({
        message: '未来数据还没哦',
        type: 'warning'
      })
    } else {
      if (month.value.slice(0, 7) === state.thisMonth.slice(0, 7)) {
        state.whichMonth = state.thisMonth
      } else if (month.value.slice(0, 7) === state.lastMonth.slice(0, 7)) {
        state.whichMonth = state.lastMonth
      } else {
        state.whichMonth = ''
      }
      handleGetOrderStatisticsData() // 主内容
    }
  }
  // 清空
  const clearSearch = () => {
    state.whichMonth = state.thisMonth // 上月 本月
    month.value = state.thisMonth // 选择的年月
    state.cycle = state.thisMonth // 清空时数据定位到本月
    handleGetOrderStatisticsData() // 主内容
  }

  return () => {
    // 日期变时 搜索
    const props = {
      onChange: () => {
        search()
      }
    }

    return (
      <div class={styles['order-statistics']}>
        <ElRow>
          <ElRadioGroup
            class={styles['weekOrMonth-radioGroup']}
            size="default"
            v-model={state.whichMonth}
            onChange={whichMonthChanged}
          >
            <ElRadioButton label={state.thisMonth}>本月</ElRadioButton>
            <ElRadioButton label={state.lastMonth}>上月</ElRadioButton>
          </ElRadioGroup>
          <ElDatePicker
            class={styles['to-right']}
            size="default"
            v-model={month.value}
            valueFormat="YYYY-MM-DD"
            type="month"
            placeholder="请选择年月"
            clearable={false}
            {...props}
          />
          <ElButton type="primary" onClick={search} class={styles['order-statistics-search']}>
            <ElIcon>
              <Search />
            </ElIcon>
            &nbsp;搜索
          </ElButton>
          <ElButton type="danger" onClick={clearSearch} class={styles['order-statistics-refresh']}>
            <ElIcon>
              <Refresh />
            </ElIcon>
            &nbsp;重置
          </ElButton>
        </ElRow>

        {/* 总览数量 */}
        <ElRow class={styles['to-bottom']}>
          <ElButton class={styles['perNum-add']}>
            <ElRow>
              <ElCol span={20}>
                <span class={styles['perNum-span']}>{state.detail.createOrder}</span>
                <br />
                新增工单
              </ElCol>
              <ElCol span={4}>
                <div class={styles['perNum-icon']}>
                  <AliIcon type="icon-xinzenggongdan-mianxing" />
                </div>
              </ElCol>
            </ElRow>
          </ElButton>
          <ElButton class={styles['perNum-completed']}>
            <ElRow>
              <ElCol span={18}>
                <span class={styles['perNum-span']}>{state.detail.completeOrder}</span>
                <br />
                已完成工单
              </ElCol>
              <ElCol span={6}>
                <div class={styles['perNum-icon']}>
                  <AliIcon type="icon-yiwanchenggongdan" />
                </div>
              </ElCol>
            </ElRow>
          </ElButton>
          <ElButton class={styles['perNum-overTime']}>
            <ElRow>
              <ElCol span={19}>
                <span class={styles['perNum-span']}>{state.detail.timeOutOrder}</span>
                <br />
                超时工单
              </ElCol>
              <ElCol span={5}>
                <div class={styles['perNum-icon']}>
                  <AliIcon type="icon-chaoshigongdan" />
                </div>
              </ElCol>
            </ElRow>
          </ElButton>
          <ElButton class={styles['perNum-arrange']}>
            <ElRow>
              <ElCol span={19}>
                <span class={styles['perNum-span']}>{state.detail.arrangeOrder}</span>
                <br />
                工单约时
              </ElCol>
              <ElCol span={5}>
                <div class={styles['perNum-icon']}>
                  <AliIcon type="icon-gongdanyueshi" />
                </div>
              </ElCol>
            </ElRow>
          </ElButton>
          {/* 暂时不统计"工单回退", 先注释掉 */}
          {/* <ElButton style="background-color: #b094d1; color: white" size='large'> */}
          {/* 工单回退<span class="num_btn" >{{detail.backOrder}}</span> */}
          {/* </ElButton> */}
        </ElRow>

        <ElRow class={styles['to-bottom']}>
          <ElCol span={10}>
            <ElCard class={styles['statistic-cards']} shadow={'never'}>
              <div class={styles['statistic-title']}>
                <SaasTitle type="primary">报修来源统计</SaasTitle>
              </div>
              <div class={styles['statistic-repairCircle']}></div>
              <PieChart dataList={state.repairSource} />
            </ElCard>
          </ElCol>
          <ElCol span={14}>
            <ElCard class={styles['to-right']} shadow={'never'}>
              <div class={styles['statistic-title']}>
                <SaasTitle type="primary">报修来源同比环比分析</SaasTitle>
              </div>
              <div class={styles['statistic-BarChart']}>
                <BarChart dataList={state.repairSourceYM} />
              </div>
            </ElCard>
          </ElCol>
        </ElRow>

        <ElRow class={styles['to-bottom']}>
          <ElCol span={10}>
            <ElCard class={styles['statistic-cards']} shadow={'never'}>
              <div class={styles['statistic-title']}>
                <SaasTitle type="primary">工区部门统计</SaasTitle>
              </div>
              <div class={styles['statistic-workAreaCircleGray']}></div>
              <div class={styles['statistic-workAreaCircleLine']}></div>
              <div class={styles['statistic-PieChartDpt']}>
                <PieChartDpt dataListDpt={state.workAreaDept} />
              </div>
            </ElCard>
          </ElCol>
          <ElCol span={14}>
            <ElCard class={styles['to-right']} shadow={'never'}>
              <div class={styles['statistic-title']}>
                <SaasTitle type="primary">工区处理统计</SaasTitle>
              </div>
              <ElScrollbar height={'470px'}>
                <div class={styles['order-deal']}>
                  {state.workAreaExecuted.map((item) => (
                    <ElCard
                      class={styles['order-elcard']}
                      shadow="hover"
                      v-slots={{
                        header: () => <span>{item.deptName}</span>
                      }}
                    >
                      <ElRow class={styles['order-mar']}>
                        <ElCol span={2}>
                          <div class={styles['icon-num']}>
                            <AliIcon type="icon-chulishuliang" />
                          </div>
                        </ElCol>
                        <ElCol span={11}>工单处理数：{item.limit}</ElCol>
                        <ElCol span={2}>
                          <div class={styles['icon-num']}>
                            <AliIcon type="icon-chaoshishu" />
                          </div>
                        </ElCol>
                        <ElCol span={9}>工单超时数：{item.timeOut}</ElCol>
                      </ElRow>
                      <ElRow class={styles['order-mar']}>
                        <ElCol span={2}>
                          <div class={styles['icon-num']}>
                            <AliIcon type="icon-pingjunchushichang" />
                          </div>
                        </ElCol>
                        <ElCol span={22}>工单平均处理时长：{item.avgExecuted}</ElCol>
                      </ElRow>
                    </ElCard>
                  ))}
                </div>
              </ElScrollbar>
            </ElCard>
          </ElCol>
        </ElRow>
      </div>
    )
  }
})
